import React, { useState, useEffect, useContext } from "react";
import { $pre } from "../../http/http";
import Header from "../../components/Header/Header";
import { Link } from "react-router-dom";
import "./Cate.less";
import { reqgetgoods, reqgetcate } from "../../http/api";
const Cate = (props) => {
  const [n, setn] = useState(0);
  const [cateArr,setCateArr] = useState([]);
  const [cateList,setCateList] = useState([]);
  let getCate =()=>{
    reqgetcate().then(res=>{
      setCateArr(res.data.list)
    })
  }
  let getGoods=(fid)=>{
    reqgetgoods({fid}).then(res=>{
      setCateList(res.data.list)
    })
  }
  useEffect(() => {
    getCate();
    getGoods(1)
  }, []);
  return (
    <div>
      <Header title="分类"></Header>
      <div className="wrap">
        <div className="left">
          {cateArr.map((item, index) => {
            return (
              <button
                key={item.id}
                className={index === n ? "active" : ""}
                onClick={() => getGoods(item.id)}
              >
                {item.catename}
              </button>
            );
          })}
        </div>
        <div className="right">
          {cateList.map((item) => {
            return (
              <Link
                to={"/detail/" + item.id}
                title={item.newsname}
                key={item.id}
              >
                <img src={$pre + item.img} alt="" />
                <div>价格：{item.price}</div>
                <div>市场价格：{item.market_price}</div>
              </Link>
            );
          })}
        </div>
      </div>
    </div>
  );
};

export default Cate;
